<template>
	<div class="publicformview">
		<el-button type="primary" size="mini" @click="handleUpdate()" v-if="blockType!=3">录入</el-button>
		<div class="bottomTop" style="margin-top: 10px;">
			<el-table max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="类型" prop="facilityclass">
				</el-table-column>
			
				<el-table-column align="center" label="名称" prop="facility">
				</el-table-column>
				
				<el-table-column align="center" label="数量" prop="facilitycount">
				</el-table-column>
				<el-table-column align="center" label="操作" width="280">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="handleUpdate(scope.row.facilityid)">修改</el-button>
						<el-button type="text" size="mini" @click="deletes(scope.row.facilityid)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="publicpaginationview">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
		</div>
		
		
		
		<el-dialog title="" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<el-form :model="addQuery" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px">
				<el-form-item label="类型：" prop="facilityclass">
					<el-select v-model="addQuery.facilityclass">
						<div v-for="(item,index) in shebeiList" :key="index">
							<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
						</div>
					</el-select>
				</el-form-item>
				<el-form-item label="名称：" prop="facility">
					<el-input v-model="addQuery.facility"></el-input>
				</el-form-item>
				<el-form-item label="数量：" prop="facilitycount">
					<el-input v-model="addQuery.facilitycount"></el-input>
				</el-form-item>
			</el-form>
			<div class="saveContent">
				<el-button type="primary" @click="save" size="medium">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		roomFacilityList,
		addRoomFacility,
		delRoomFacility,
		roomFacilityData,
		updRoomFacility
	} from '@/api/industry'
	export default {
		props:{
			blockType:String,
			roomid:String
		},
		name: "fangwuxianzhuang",
		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20
				},
				addQuery: {
					facilityclass: '',
					facility:'',
					facilitycount:''
				},
				total: 0,
				options: [{
					key: "1"
				}],
				list: [],
				listLoading: false,
				dialogVisible: false,
				isChanquan: true,
				type: 1,
				chanyeList:[],
				shebeiList:[]
			};
		},

		computed: {
		},

		mounted() {
			// 遍历字典
			this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
			this.chanyeList.forEach((item,index)=>{
				if(item.classname == '房间设备'){
					this.shebeiList = item.classmidList
				}
			})
			
			this.roomFacilityList()
		},

		methods: {
			roomFacilityList() {
				let data = {
					RoomID: this.roomid?this.roomid:localStorage.getItem('roomid'),
					pageNum:this.pageNum,
					pageSize:this.pageSize
				}
				if(localStorage.getItem('roomid')||this.roomid){
					roomFacilityList(data).then(res => {
						console.log(res)
						this.list = res.data.list
						this.total = res.data.total
					})
				}
				
			},
			handleUpdate(facilityid) {
				this.facilityid = facilityid
				this.dialogVisible = true;
				if(facilityid){
					let data = {
						facilityid:facilityid
					}
					roomFacilityData(data).then(res=>{
						console.log(res)
						this.addQuery = res.data
					})
				}
			},
			save() {
				if(localStorage.getItem('roomid')||this.roomid){
					let data = this.addQuery
					data.roomid = this.roomid?this.roomid:localStorage.getItem('roomid')
					if (this.facilityid) {
						data.facilityid = this.facilityid
						updRoomFacility(data).then(res => {
							console.log(res)
							this.dialogVisible = false;
							this.roomFacilityList()
							this.$message({
								type: 'success',
								message: '操作成功!'
							});
						})
					} else {
						addRoomFacility(data).then(res => {
							console.log(res)
							this.dialogVisible = false;
							this.roomFacilityList()
							this.$message({
								type: 'success',
								message: '操作成功!'
							});
						})
					}
					this.reter()
				}else{
					this.$message({
						type: 'success',
						message: '请先保存基本信息!'
					});
				}
				
			},
			reter(){
				this.addQuery.facilityclass='',
				this.addQuery.facility='',
				this.addQuery.facilitycount=''
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.roomFacilityList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.roomFacilityList()
			},
			deletes(facilityid){
				this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						facilityid:facilityid
					}
					delRoomFacility(data).then(res=>{
						this.roomFacilityList()
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			resetForm(val) {
				console.log("1");
				this.$refs[val].resetFields();
			},
			handleAddUser(type) {
				this.isChanquan = type == 1 ? true : false
			},
			returns() {
				this.$router.go(-1)
			},
			// 选择类型
			selectButton(type) {
				this.type = type
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			}
		},
	};
</script>

<style scoped>
	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.xinxi {
			display: flex;
			width: 800px;
		}
	}

	.el-form-item {
		justify-content: start !important;
	}

	.el-select {
		width: 180px;
	}

	.el-date-picker {
		width: 180px;
	}

	.bottomTop {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}

	.fangwuList {
		width:100%;
		background-color: #F5F5F5;
		margin: 3px auto 0;
		overflow: hidden;
	}

	.fangwuText {
		font-weight: bold;
		font-size: 16px;
		color: #008C93;
		margin-top: 20px;
		margin-left: 26px;
	}
	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}
</style>